<template>
  <div>
    <ul class="gooditems">
      <li
        v-for="(item,index) in GoodsList"
        :key="item.gid"
      >
        <ul class="goodsul">
          <li>设备名称:<span>{{item.gname}}</span></li>
          <li>设备型号:<span>{{item.gmodel}}</span></li>
          <li>设备品牌:<span>{{item.bandname}}</span></li>
          <!--可申数量:<span>{{item.kucun}}</span>-->
          <li>查看描述<van-checkbox
              icon-size="0.7rem"
              v-model="item.danxuan"
              class="add_icon"
              @click="toggle(index,item.gid)"
            ></van-checkbox>
          </li>
        </ul>
      </li>
    </ul>

    没有更多了<br /><br /><br /><br /><br /><br />
    <van-goods-action>
      <van-goods-action-icon
        icon="cart-o"
        text="已选型号"
        :badge="selected_count"
      />
      <van-goods-action-button
        color="#408FFB"
        type="danger"
        text="下一步"
        @click="gotocart()"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  //   name: 'Index',
  data () {
    return {
      catid: this.$route.params.id,
      selected_count: 0,
      selected_goodsid: [],
      value: '',
      checked: false,
      active: 1,
      activeId: 0,
      activeIndex: 0,
      goodsitem: [
        { gid: 1, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },
        { gid: 2, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },
        { gid: 3, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },
        { gid: 4, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },
        { gid: 5, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },
        { gid: 6, gname: '接入交换机', gmodel: 'jfsdfosofhsofhshfdshfdish', bandname: 'huawei', kucun: 21, danxuan: false },

      ],
    }
  },
  props: ["GoodsList"],
  methods: {
    toggle (index, gid) {

      //  console.log(this.$refs.checkboxes[0].checked)
      var count = this.selected_goodsid.indexOf(gid);
      if (count > -1) {
        this.selected_goodsid.splice(index, 1);

      } else {
        this.selected_goodsid.push(gid)
      }
      this.selected_count = this.selected_goodsid.length
      // this.$refs.checkboxes[index].toggle()     
    },
    gotocart () {
      this.$router.push('/Cart')
    }
  }
}
</script>

<style>
.gooditems {
  margin-top: 5px;
  /* height: 50%; */
  /* border: 1px solid black; */
}
.add_icon {
  /* font-size: 0.8rem; */
  text-align: right;
  float: right;
}
.goodsul {
  /* border: 1px solid black; */
  width: 96%;
  margin: 0.2rem 0.2rem 0.2rem 0.2rem;
  /* font-size: 0.14rem; */
  /* color: #646566; */
  border-bottom: 1px solid black;
}
.goodsul li {
  text-align: left;
  line-height: 0.8rem;
  /* color: #646566; */
}
.goodsul li span {
  /* font-size: 0.14rem; */
  /* color: #646566; */
  font-weight: bold;
}
#goods_title {
  border: 1px solid rebeccapurple;
}
</style>